<template>
  <div>
    <div class="container" :style="{height: windowHeight - 200+'px'}">
      <div class="left left-part">
        <el-tree :data="data" :props="defaultProps" @node-click="handleNodeClick"></el-tree>
      </div>
      <div class="left">
      </div>
      <div class="line">
      </div>
      <div class="right-part">
        <div class="content" ref="orderview">
          <div class="part" ref="part1">1</div>
          <div class="part" ref="part2">2</div>
          <div class="part" ref="part3">3</div>
          <div class="part" ref="part4">4</div>
          <div class="part" ref="part5">5</div>
          <div class="part" ref="part6">6</div>
          <div class="part" ref="part7">7</div>
          <div class="part" ref="part8">8</div>
          <div class="part" ref="part9">9</div>
          <div class="part" ref="part10">0</div>

        </div>
        
      </div>
      
      <!-- <el-input placeholder="请输入密码" v-model="input" show-password></el-input> -->
    </div>
  </div>
</template>

<script>
export default {
    name: 'person',
    data() {
        return {
          windowHeight: document.documentElement.clientHeight,
          data: [
            {
              label: '一级 1',
              children: [{
                label: '二级 1-1',
                id: 1
              }]
            }, {
              label: '一级 2',
              children: [{
                label: '二级 2-1',
                id: 2
              }, {
                label: '二级 2-2',
                id: 3
              }]
            }, {
              label: '一级 3',
              children: [{
                label: '二级 3-1',
                id: 4
              }, {
                label: '二级 3-2',
                id: 5
              }]
            } 
          ],
          defaultProps: {
            children: 'children',
            label: 'label'
          },

        };
    },
    created() {
        // this.getData();
    },
    methods: {
      handleNodeClick(data) {
        if(data.id) {
          this.goNavList(data.id);
        }
      },
      goNavList(val) {
        let height = 0;
        switch(val) {
          case 1:
            height = 0;
            break;
          case 2:
            height = this.$refs.part1.offsetHeight;
            break;
          case 3:
            height = this.$refs.part1.offsetHeight + this.$refs.part2.offsetHeight;
            break;
          case 4:
            height = this.$refs.part1.offsetHeight + this.$refs.part2.offsetHeight + this.$refs.part3.offsetHeight;
            break;
          default:
            break;
        }
        console.log('height',height)
        this.$refs.orderview.scrollTop = height;
      },
      getData() {
        showLoading();
        const u = '/signin/userExtend/getUserInfo?serviceId=1';
        this.$axios.get(u,{headers:{'cloud-Auth-Token': localStorage.getItem('cloud-Auth-Token')}})
        .then((res)=>{
          if(res.data.code == 200){
            this.ruleForm =  res.data.data;
          }else{
            this.$message.error(res.data.msg);
          };
          hideLoading();
        }).catch((err)=>{
          console.log(err);
        });
      },


    }
};
</script>

<style scoped lang="less">
.container {
  display: flex;
  position: relative;
}
.left {
  width: 200px;
}
.left-part {
  width: 200px;
  position: absolute;
  left: 30px;
  top: 30px;
}
.line {
  border-right: 3px solid #ccc;
}
.right-part {
  width: calc(100% - 203px);
  height: 100%;
  overflow-y: scroll;
  .content {
    width: 100%;
    padding: 30px;
    box-sizing: border-box;
    .part  {
      width: 100%;
      height: 200px;
      background: sienna;
    }

  }
}
.el-tree {
    background: rgba(255, 255, 255, 0); 
}
/deep/ .el-tree-node__content:hover {
    background-color: rgba(255, 255, 255, 0);
}
/deep/ .el-tree-node__content:active {
    background-color: rgba(255, 255, 255, 0);
}
/deep/ .el-tree-node__content:link {
    background-color: rgba(255, 255, 255, 0);
}
/deep/ .el-tree-node__content:visited {
    background-color: rgba(255, 255, 255, 0);
}
/* 滚动条样式重写 ---start--- */
::-webkit-scrollbar {
  width: 4px;
  height: 4px;
  background-color: transparent;
  border-radius: 5px;
  z-index: 999;
}
::-webkit-scrollbar-track {
  -webkit-box-shadow: #fff;
  border-radius: 5px;
  background-color: transparent;
}
::-webkit-scrollbar-thumb {
  background-color: #d3d3d3;
  border-radius: 5px;
  &:hover {
    background-color: #8a8a8a;
  }
}
/* 滚动条样式重写 ---end--- */

</style>
